import React from "react";
import styled from 'styled-components';
import CommonCard from "@/components/CommonCard/CommonCard";
import { Form, Input, Modal, Tag, Timeline } from "@arco-design/web-react";
import CameraArea from "./CameraArea";
import ContentCard from "@/components/ContentCard/ContentCard";
import LineCharts from "@/components/LineCharts/LineCharts";

const Wrapper = styled.div`
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
`;

const StyledDeviceInfo = styled.div`
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .arco-form-item {
        margin-bottom: 5px;
    }
`;

const FlexRow = styled.div`
    position: relative;
    width: 100%;
    height: 33.3%;
    display: flex;
    flex-direction: row;

    .arco-input-disabled {
        width: 97%;
    }

    .arco-timeline-item {
        min-height: 60px;
    }
`;

interface IProps {
    style?: { [key: string]: string };
    detail?: IDetail;
}

const DeviceDetail = (props: IProps) => {

    const { detail, style = {} } = props;

    const fixNums = new Array(30).fill(0);
    const errorTime = Math.floor(30 * Math.random());
    for(let i = errorTime; i < fixNums.length; i++) {
        fixNums[i] = 1;
    }
    
    const fixNumsOption = [
        {
            type: 'line',
            smooth: true,
            showSymbol: false,
            options: {
                yLabel: '次数'
            },
            areaStyle: {
                opacity: 0.3
            },
            data: fixNums,
        },
    ];
    
    const fixTime = new Array(30).fill(0);
    fixTime[errorTime] = 3;
    const fixTimeOption = [
        {
            type: 'line',
            smooth: true,
            showSymbol: false,
            options: {
                yLabel: '分'
            },
            areaStyle: {
                opacity: 0.3
            },
            data: fixTime,
        },
    ];

    const healthScore = new Array(30).fill(0).map((item) => 90 - 10 * Math.random());
    const healthScoreOption = [
        {
            type: 'line',
            smooth: true,
            showSymbol: false,
            options: {
                yLabel: '小时'
            },
            areaStyle: {
                opacity: 0.3
            },
            data: healthScore,
        },
    ];

    return (
        <Wrapper style={{...style}}>
            {/* { detail?.name } */}
            <CameraArea
                style={{ marginRight: '12px' }}
                url={''}
                isSupportPTZ={false}
            />
            <StyledDeviceInfo>
                {/* Row1: 日志 & 设备信息 */}
                <FlexRow style={{ height: '30%' }}>
                    <ContentCard
                        style={{ width: '70%', marginRight: '12px' }}
                        title="设备日志"
                        tooltip={{
                            show: true,
                            content: "设备日志, 记录设备的操作日志等内容。",
                        }}
                    >
                        <FlexRow style={{ height: '100%' }}>
                            <Timeline style={{ marginRight: '12px' }}>
                                <Timeline.Item label='2023-01-02 12:01:23'>设备重启动</Timeline.Item>
                                <Timeline.Item label='2018-01-02 12:03:51'>树莓派电源关闭</Timeline.Item>
                                <Timeline.Item label='2018-01-02 12:04:34'>树莓派电源启动</Timeline.Item>
                            </Timeline>
                            <Timeline style={{ marginRight: '12px' }}>
                                <Timeline.Item label='2023-01-02 12:21:16'>摄像头启动</Timeline.Item>
                                <Timeline.Item label='2018-01-02 12:22:08'>摄像头关闭</Timeline.Item>
                                <Timeline.Item label='2018-01-02 12:22:58'>摄像头启动</Timeline.Item>
                            </Timeline>
                            <Timeline style={{ marginRight: '12px' }}>
                                <Timeline.Item label='2023-01-02 15:17:52'>摄像头位姿操作-左 ∠13.2°</Timeline.Item>
                                <Timeline.Item label='2023-01-02 15:18:11'>摄像头位姿操作-右 ∠05.3°</Timeline.Item>
                                <Timeline.Item label='2023-01-02 15:18:16'>摄像头位姿操作-下 ∠08.3°</Timeline.Item>
                            </Timeline>
                            <Timeline style={{ marginRight: '12px' }}>
                                <Timeline.Item label='2023-01-02 15:24:02'>树莓派电源关闭</Timeline.Item>
                                <Timeline.Item label='2018-01-03 09:35:26'>树莓派电源启动</Timeline.Item>
                            </Timeline>
                        </FlexRow>
                    </ContentCard>
                    <ContentCard
                        style={{ width: '30%' }}
                        title="设备信息"
                        tooltip={{
                            show: true,
                            content: "设备的基础信息。",
                        }}
                    >
                        <Form style={{ height: '100%' }}>
                            <Form.Item label="设备名称">
                                <Input disabled value={detail?.name}></Input>
                            </Form.Item>
                            <Form.Item label="设备编号">
                                <Input disabled value={detail?.number}></Input>
                            </Form.Item>
                            <Form.Item label="设备状态">
                                {
                                    detail?.state === '检修中' ? <Tag  color='#f53f3f' >{ detail?.state }</Tag>  : <Tag  color='#7bc616' >{ detail?.state }</Tag>
                                }
                            </Form.Item>
                            <Form.Item label="设备IP">
                                <Input disabled value={detail?.ip}></Input>
                            </Form.Item>
                            <Form.Item label="设备地址">
                                <Input disabled value={detail?.address}></Input>
                            </Form.Item>
                        </Form>
                    </ContentCard>
                </FlexRow>
                {/* Row2: 健康分数曲线 & 持续时间 & 预计故障时间 */}
                <FlexRow style={{ height: '30%' }}>
                    <ContentCard
                        style={{ width: '80%', marginRight: '12px' }}
                        title="设备健康分数"
                        tooltip={{
                            show: true,
                            content: "健康分数曲线, 默认展示30日内数据。",
                        }}
                    >
                        <LineCharts id="healthScore"  style={{ height: '100%' }} data={healthScoreOption}/>
                    </ContentCard>
                    <ContentCard
                        style={{ width: '20%' }}
                        title="设备估计"
                        tooltip={{
                            show: true,
                            content: "包含设备的持续已运行时间以及预计的可能损坏的时间。",
                        }}
                    >
                        <Form style={{ width: '100%' }}>
                            <Form.Item label="设备已运行时长" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
                                <FlexRow style={{ width: '100%', height: '80px', justifyContent: 'center', alignItems: 'center', fontSize: '24px', fontWeight: 'bold' }}>
                                    {`${Math.floor(1500 + 200 * (Math.random() - 0.5))} 小时`}
                                </FlexRow>
                            </Form.Item>
                            <Form.Item label="设备预计须维修时间" labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
                                <Input disabled value="2023-11-27"></Input>
                            </Form.Item>
                        </Form>
                    </ContentCard>
                </FlexRow>
                {/* Row3: 维修次数 & 维修间隔时长 */}
                <FlexRow style={{ height: '40%' }}>
                    <ContentCard
                        style={{ width: '50%', marginRight: '12px' }}
                        title="设备维修次数"
                        tooltip={{
                            show: true,
                            content: "设备维修次数, 默认展示30日内数据。",
                        }}
                    >
                        <LineCharts id="fixNums"  style={{ height: '100%' }} data={fixNumsOption}/>
                    </ContentCard>
                    <ContentCard
                        style={{ width: '50%' }}
                        title="设备维修间隔时长"
                        tooltip={{
                            show: true,
                            content: "设备维修间隔时长, 默认展示30日内数据。",
                        }}
                    >
                        <LineCharts id="fixTime"  style={{ height: '100%' }} data={fixTimeOption}/>
                    </ContentCard>
                </FlexRow>
            </StyledDeviceInfo>
        </Wrapper>
    )
}


export default DeviceDetail;